<template>
	<el-container class="container">
		<el-header class="header-bar">Header</el-header>
		<el-main class="main-content">
			<el-table :data="blogsList">
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="content" label="内容"></el-table-column>
				<el-table-column prop="userId" label="作者"></el-table-column>
				<el-table-column prop="title" label="标题"></el-table-column>
			</el-table>
			<el-pagination
				@current-change="onChange"
				background
				layout="prev, pager, next"
				:total="total"
			>
			</el-pagination>
		</el-main>
	</el-container>
</template>
<script>
import axios from 'axios'
export default {
	data() {
		return {
			blogsList: [],
			total: 0,
			pageOpt: {
				page: 1,
				size: 5
			}
		}
	},
	created() {
		this.getHomeData()
	},
	methods: {
		// 获取当前的页码
		onChange(page) {
			console.log(page)
			this.pageOpt.page = page
			this.getHomeData()
		},
		async getHomeData() {
			const data = await axios.get('/api/blogs', {
				params: {
					page: this.pageOpt.page,
					size: this.pageOpt.size
				},
				headers: {
					token: ''
				}
			})
			this.blogsList = data.data.data.pageData
			this.total = data.data.data.total
			console.log(data, 'data')
		}
	}
}
</script>
<style lang="scss">
.el-container {
	height: 100vh;
}
</style>
